<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
	<head>
	  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	  <title>Index</title>
	  <link rel="stylesheet" href="css/index.css">
	  <script src="js/jquery-3.1.1.min.js"></script>
	</head>

	<body>
	  <div class="container right-panel-active">
		<!-- 注册 -->
		<div class="container__form container--signup">
		  <form class="form" id="form_register" action="manageSys.do" method="post">
			  <h2 class="form__title">注册</h2>
			  <input id="register_userName" name="userName" type="text" placeholder="输入用户名" class="input" />
			  <input id="register_password" name="password" type="password" placeholder="输入密码" class="input" />
			  <input id="register_confirmPassword" name="confirmPassword"type="password" placeholder="确认密码" class="input" />
			  <button class="btn" id="bt_register" type="button">注册</button>
		  </form>
		</div>

		<!-- 登录 -->
		<div class="container__form container--signin">
		  <form class="form" id="form_login" action="manageSys.do" method="post">
			  <h2 class="form__title">登录</h2>
			  <input id="login_userName" name="userName" type="text" placeholder="输入用户名" class="input" />
			  <input id="login_password" name="password" type="password" placeholder="输入密码" class="input" />
			  <!--<a href="#" class="link">忘记密码？</a>-->
			  <button class="btn" id="bt_login" type="button">登录</button>
		  </form>
		</div>

		<!-- 覆盖层 -->
		<div class="container__overlay">
		  <div class="overlay">
			<div class="overlay__panel overlay--left">
				<button class="btn" id="signUp">注册</button>
			</div>
			<div class="overlay__panel overlay--right">
				<button class="btn" id="signIn">登录</button>
			</div>
		  </div>
		</div>
	  </div>

	  <script>
		const signInBtn = document.getElementById("signIn");
		const signUpBtn = document.getElementById("signUp");
		const container = document.querySelector(".container");

		signUpBtn.addEventListener("click", () => {
		  container.classList.remove("right-panel-active");
		});

		signInBtn.addEventListener("click", () => {
		  container.classList.add("right-panel-active");
		});

		//登录按钮点击事件
		document.getElementById("bt_login").onclick = function() {
			var userName = $("#login_userName").val();//id选择器
			var password = $("#login_password").val();
			if (userName == "") {
				alert("用户名为空！");
			} else {
				if (password == "") {
					alert("密码为空！");
				} else {
					$.ajax({
						url:"login.do",//请求路径
						data: {//请求数据
							"userName":userName,
							"password":password
						},
						type:"post",//请求类型
						//dataType:"json",//响应数据返回格式
						success:function(data) {//返回成功处理函数
							console.log(data);
							//alert("userName:"+userName+"   "+"password:"+password+"\ndata:"+data);
							if (data == "passwordFalse") {
								alert("密码错误！");
							} else if (data == "userUnExist") {
								alert("用户名不存在！");
							} else if (data == "loginSuccess") {
								alert("登录成功！");
								$("#form_login").submit();
							}
						},
						error:function() {//返回失败处理函数
							alert("ajax返回失败！");
						}
					})
				}
			}
		};

		//注册按钮点击事件
		document.getElementById("bt_register").onclick = function() {
			var userName = $("#register_userName").val();//id选择器
			var password = $("#register_password").val();
			var confirmPassword = $("#register_confirmPassword").val();
			if (userName == "") {
				alert("用户名为空！");
			} else {
				if (password == "") {
					alert("密码为空！");
				} else {
					if (confirmPassword == "") {
						alert("确认密码为空！");
					} else if (password == confirmPassword) {
						$.ajax({
							url: "register.do",//请求路径
							data: {//请求数据
								"userName": userName,
								"password": password
							},
							type: "post",//请求类型
							//dataType: "json",//响应数据返回格式
							success: function (data) {//返回成功处理函数
								console.log(data);
								//alert("userName:"+userName+"   "+"password:"+password+"\ndata:"+data);
								if (data == "userExist") {
									alert("用户名存在！");
								} else if (data == "registerSuccess") {
									alert("注册成功！");
									document.getElementById("form_register").submit();
								} else if (data == "loginSuccess") {
									alert("注册失败！");
								}
							},
							error:function(data) {//返回失败处理函数
								alert("ajax返回失败！");
							}
						})
					} else {
						alert("密码不相等！");
					}
				}
			}
		};
	  </script>
	</body>
</html>